<template>
  <div
    class="them-box"
    ref="them"
    style="width: 100%; height: 100%; position: relative; overflow: hidden"
  >
    <div class="scan-line"></div>
    <div
      :class="wrapClass"
      style="width: 100%; height: 100%"
      id="themeRiver"
    ></div>
  </div>
</template>

<script>
import down from "@/assets/down.png";
import up from "@/assets/up.png";
import { COLORS } from "@/constants";
import mixins from "./mixins";
import { genDateForFormat } from "@/utils/index";
export default {
  name: "themeRiverForEchart",
  mixins: [mixins],
  props: {
    // id: String,
    wrapClass: String,
    option: {
      // echarts 配置项
      type: Object,
      default: () => {},
    },
    rawData: {
      // 行数据: 二维数组
      type: Array,
      default: () => [[]],
    },
    rawLegend: {
      // 行标签
      type: Array,
      default: () => [],
    },
    xLabel: {
      type: Array,
      default: () => [],
    },
    topicTxt: {
      type: Array,
      default: () => [],
    },
    isShow: {
      type: Boolean,
      default: true,
    },
    legendData: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    getDefaultOptions() {
      const that = this;
      const handleGraphicClick = (obj) => {
        const {
          target: { style },
        } = obj;
        const { text } = style;
        window.location.href = `/topic.html?title=${text.replace(/#/g, "")}`;
      };

      const renderDown = (left, top, txt) => {
        return {
          type: "group",
          left,
          top,
          height: 138,
          width: 326,
          children: [
            {
              type: "image",
              right: 20,
              top: 20,
              z: 100,
              origin: [0, 0],
              style: {
                image: down,
                width: 306,
                height: 138,
                opacity: 1,
              },
            },
            {
              type: "text",
              z: 110,
              left: "center",
              top: "42",
              style: {
                fill: "#303753",
                text: [txt].join(": "),
                font: "14px Microsoft YaHei",
              },
              onclick: function (e) {
                handleGraphicClick(e);
              },
            },
          ],
        };
      };

      const renderUp = (left, bottom, txt) => {
        return {
          type: "group",
          left,
          bottom,
          height: 121,
          width: 326,
          children: [
            {
              type: "image",
              right: 20,
              top: 20,
              z: 100,
              origin: [0, 0],
              style: {
                image: up,
                width: 306,
                height: 121,
                opacity: 1,
              },
            },
            {
              type: "text",
              z: 110,
              left: "center",
              bottom: 10,
              style: {
                fill: "#303753",
                fontSize: 14,
                text: [txt].join(""),
                font: "14px Microsoft YaHei",
              },
              onclick: function (e) {
                handleGraphicClick(e);
              },
            },
          ],
        };
      };
      const setPosition = (xLabel, topicTxt) => {
        let locations = [];
        let xLaLen = xLabel.length - 1;
        console.log(document.body.clientWidth);
        let offsetWidth = document.body.clientWidth-40;
        let canvasCentWidth = offsetWidth - 60;
        for (let i = 0; i < xLabel.length; i++) {
          for (let j = 0; j < topicTxt.length; j++) {
            if (xLabel[i] == topicTxt[j].date) {
              let num = (((canvasCentWidth / offsetWidth) * 100) / xLaLen) * i;
              locations.push([`${num}%`, "18%"]);
            }
          }
        }
        return locations;
      };
      const generateGraphic = () => {
        let locations = setPosition(this.xLabel, this.topicTxt);
        return this.topicTxt.map((t, i) => {
          return i % 2 === 0
            ? renderDown(locations[i][0], locations[i][1], t.title)
            : renderUp(locations[i][0], locations[i][1], t.title);
        });
      };

      const defOption = {
        color: COLORS,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              color: "rgba(0,0,0,0.2)",
              width: 1,
              type: "solid",
            },
          },
          padding: 0,
          formatter: function (params) {
            return that.formatTipinfo(params);
          },
        },
        legend: {
          show: this.isShow,
          right: 50,
          top: -30,
          data: that.rawLabels,
          formatter: function (name) {
            let index = that.rawLegend.findIndex((item) => item === name);
            // const total = that.rawData[index].reduce((a, b) => a + b, 0);
            const { value = 0, rate = 0 } = that.legendData[index] || {};
            return [`{a|${name}}`, `{x|${value} (${rate})}`].join("\n");
          },
          textStyle: {
            rich: {
              a: {
                position: "relative",
                fontSize: 12,
                color: "#767e91",
                align: "left",
                padding: [2, 0, 28, 0],
              },
              x: {
                fontSize: 14,
                // align: 'center',
                color: "#e6e9f5",
                padding: [-4, 0, 0, -30],
                lineHeight: 25,
              },
            },
          },
        },
        singleAxis: {
          top: 50,
          bottom: 50,
          right: 30,
          left: 30,
          axisTick: {
            show: false,
          },
          nameLocation: "start",
          axisLabel: {
            color: "#767e91",
            interval: 0,
            showMinLabel: true,
            formatter: function (value, index) {
              return genDateForFormat(value, "MM-DD");
            },
          },
          splitLine: {
            show: false,
          },
          type: "time",
          // splitNumber: 5,
          axisPointer: {
            show: true,
            type: "line",
            snap: true,
            lineStyle: {
              color: "#4262ff",
              width: 2,
              shadowBlur: 10, // 阴影的模糊大小
              shadowColor: "#4262ff",
              shadowOffsetX: -5,
              label: {
                show: true,
              },
            },
          },
        },
        graphic: generateGraphic(),
        series: [
          {
            type: "themeRiver",
            emphasis: {
              // 高亮的图标及标签样式
              show: true,
              label: {
                show: true,
                position: ["50%", "50%"],
                color: "red",
                backgroundColor: "gold",
                borderColor: "blue",
                formatter: () => {
                  return ["{a对应的文字|a文字对应的样式}"];
                },
                rich: {
                  a: {
                    color: "red",
                    fontSize: 24,
                  },
                },
              },
              itemStyle: {
                shadowBlur: 20,
                shadowColor: "rgba(0, 0, 0, 0.8)",
              },
            },
            label: {
              // 指定Y轴标签的样式
              show: false,
              // formatter: (obj) => {
              //   return [
              //     '{a文字|a文字对应的样式}'
              //   ]
              // },
              // rich: {
              //   a: {
              //     color: 'red',
              //   }
              // }
            },
            itemStyle: {
              // 指定河流图中每个带状河流分支的样式
              borderColor: "transparent",
              borderWidth: 1,
            },
            data: that.generateRiverData(),
          },
        ],
      };

      return Object.assign({}, defOption, this.option || {});
    },
  },
  data() {
    return {
      myCharts: null,
    };
  },
  mounted() {
    const options = this.getDefaultOptions;
    console.log(options);
    if (options) {
      this.myCharts = this.$echarts.init(document.getElementById("themeRiver"));
      this.myCharts.setOption(options);
      this.handleResize(this.myCharts);
    }
  },
  methods: {
    formatTipinfo(params) {
      let htmlStr =
        "<div style='background: #282b3c; border-radius: 5px; padding: 20px; width: 160px;'>";
      htmlStr += `
          <div style="display: flex; border-bottom: 1px solid #ff6666; align-items: center; height: 28px;">
            <div style="width: 4px; height: 4px; position: relative; background: #ff6666"></div>
            <div style="font-size: 12px; color: #e6e9f5; margin-left: 5px;">${params[0].value[0]}</div>
          </div>
        `;
      for (var i = 0; i < params.length; i++) {
        const { value = 0, rate = 0 } = this.legendData[i] || {};
        htmlStr += `
          <div style="margin-top: 20px;">
            <div style="display: flex; height: 12px; align-items: center;">
              <div style="background: ${COLORS[i]}; width: 18px; height: 12px;"></div>
              <div style="font-size: 12px; color: #767e91; margin-left: 10px;">${params[i].name}</div>
            </div>
            <div style="color: #fff; font-size: 14px; line-height: 1; margin-top: 13px">${value} (${rate})</div>
          </div>
        `;
      }
      htmlStr += "</div>";
      return htmlStr;
    },
    generateRiverData() {
      let data = [];
      for (let i = 0, iLen = this.rawData.length; i < iLen; i++) {
        for (let j = 0, jLen = this.rawData[i].length; j < jLen; j++) {
          let label = this.rawLegend[i];
          data.push([this.xLabel[j], this.rawData[i][j], label]);
        }
      }
      return data;
    },
  },
  watch: {
    getDefaultOptions: function (nVal) {
      console.log(nVal)
      this.myCharts.setOption(nVal);
    },
    deep: true,
  },
};
</script>

<style scoped>
.them-box:hover .scan-line {
  display: none;
}
.scan-line {
  position: absolute;
  left: 30px;
  bottom: 50px;
  width: 2px;
  height: 400px;
  border-radius: 1px;
  background: #00f;
  box-shadow: -3px 0 15px 2px rgba(45, 48, 250, 0.9);
  animation: inif 10s infinite linear;
  z-index: 100;
  opacity: 0.8;
}
@keyframes inif {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(2000px);
  }
}
</style>
